<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<%@include file="/commons/etCommonHead.jsp"%>
<style type="text/javascript">
.gocenter{
    float: center;
    height: 40px;
    width: 40px;
}
}
</style>

</head>
<body>
  <div id="header">
      <div class="gohome radius20"><a href="<%=basePath%>ph/sys/index.do"><img src="<%=basePath%>et/images/icons/home.png" alt="" title="" /></a></div>
      <div class="gomenu radius20"><a href="<%=basePath%>ph/sys/ordered.do" onclick=""><img src="<%=basePath%>et/images/icons/about.png" alt="" title="" /></a></div>
  </div>
  <div class="swiper-container swiper-parent">
    <div class="swiper-wrapper">
    

      

     
<!--Page 3 content-->
      <div class="swiper-slide sliderbg">
      <div class="swiper-container swiper-nested3">
               <div class="swiper-wrapper">
                    <div class="swiper-slide">
                              <div class="slide-inner">
                                        <div class="pages_container ">
                                        <h3 class="page_title">本周订课</h3>
                                                <div class="toogle_wrap_blog radius8">
                                                    <div class="trigger_blog"><a href="#">时间选择</a></div>
                                                        <div class="toggle_container_blog">
                                                            <ul class="listing_detailed">
                                                            <c:forEach items="${weekDateList }" var="item" varStatus="status">
													        	<li><a href="javascript:void(0);" onclick="queryClassTableByDate(this,${status.count})">${weekStr[status.index] }（${item}）</a></li>
													        	<input type="hidden" id="classDate${status.count}" value="${item}" />
													        </c:forEach>
															<!-- <a class="button_11 blue blue_borderbottom radius4" href="#">确定</a> -->
                                                            </ul>
                                                        </div>
                                                </div>
                                                
                                                <ul class="posts" id="ul_posts">
                                                </ul>
                                                
                                                <div id="loadMore" class="radius8">加载更多...</div> 
                                                <div id="showLess" class="radius8">没有更多了</div>
 										<div class="scrolltop radius20"><a href="#" class="scrolltop3"><img src="<%=basePath%>et/images/icons/top.png" alt="Go on top" title="Go on top" /></a></div>
                                        </div>
                                        <!--End of page container-->
                              </div>
                    </div>
              </div>
              <div class="swiper-scrollbar3"></div>
     </div>
     </div>
     
      

       
     <!--End of pages--> 

    </div>
   
  </div>
</body>
<%@include file="/commons/etCommonJs.jsp"%>
<script type="text/javascript">
$(document).ready(function(){
	ajaxDiv(false, '', '<%=basePath%>ph/classTable/queryClassTableByDay.do','' , queryClassTableByDate2);
});

	function queryClassTableByDate(el,num){
		var classDate = $("#classDate"+num).val();
		<%-- if(classDate==""){
			$(el).parent().css("background","#f4f4f4 url('<%=basePath%>et/colors/blue/images/checked.png') no-repeat scroll 10px 5px");
			$("#classDate"+num).val($(el).parent().html());
		}else{
			$(el).parent().css("background","#f4f4f4 url('<%=basePath%>et/colors/blue/images/bullet_checked.png') no-repeat scroll 10px 5px");
			$("#classDate"+num).val("");
		} --%>
		
		ajaxDiv(false, '', '<%=basePath%>ph/classTable/queryClassTableByDay.do','{classDate:"'+classDate+'"}' , queryClassTableByDate2);
		$(".trigger_blog").toggleClass("activeb").next().slideToggle("slow");
		
	}
	
	
	function queryClassTableByDate2(data,divId){
		var classTableList = data["classTableList"];
		showClassTable(classTableList);
	}
	
	
	function showClassTable(classTableList){
		$("#ul_posts").html("");
		for ( var i = 0; i < classTableList.length; i++) {
			var classTable = classTableList[i];
			if(classTable.id>0){
				var dateStr=classTable.classDate.toString();
       			dateStr =  dateStr.replace(/-/g,"/");
       			var day = new Date(Date.parse(dateStr));   //需要正则转换的则 此处为 ： var day = new Date(Date.parse(date.replace(/-/g, '/')));  
				 var today = new Array('Sun','Mon','Tue','The','Wed','Fri','Sat');  
				 var week = today[day.getDay()];
       			
				var arr=new Array();
				//注split可以用字符或字符串分割
				var level = "";
				var levelType=classTable.levelType;
				var classLevel=classTable.classLevel;
				if(levelType=="all"){
					level = "all level";
				}else if(levelType=="equals"){
					arr=classLevel.split(',');
					level = "level"+arr[1];
				}else if(levelType=="above"){
					arr=classLevel.split(',');
					level = "above level"+arr[1];
				}else{
					arr=classLevel.split(',');
					level = "level"+arr[1]+"-"+arr[arr.length-2];
				}
				var str  = '<li class="post">';
				if(classTable.isOrder==0){
					str+='<a id="a_'+classTable.id+'" href="javascript:orderClass('+classTable.id+')" class="post_more"></a>';
				}else{
					str+='<a id="a_'+classTable.id+'" href="javascript:cancelClass('+classTable.id+')" class="post_more activep"></a>';
				}
                str+='<div class="post_right_reveal">';
                str+='<h5><a href="#" onclick="">课名：'+classTable.classInfoName+'；教师：'+classTable.classTeacherName+'；地点：'+classTable.classAddr+'；级别：'+level+'；限定人数：'+classTable.studentNum+'；</a></h5>';
                str+='</div><div class="post_right_unreveal">';
                if(classTable.isOrder==0){
                	str+='	<span id="span_'+classTable.id+'" class="post_comments">订课成功</span>';
                }else{
                	str+='	<span id="span_'+classTable.id+'" class="post_comments">取消订课成功</span>';
                }
                
                str+='</div><div class="post_left">';
                str+='   <span class="day">'+week+'</span>';
                str+='   <span class="month">'+classTable.classStartTime+'--'+classTable.classEndTime+'</span>';
                str+=' <input type="hidden" id="startTime'+classTable.id+'" value="'+classTable.classDate+' '+classTable.classStartTime+'"></div></li>';
				$("#ul_posts").append(str);
				
				
				var date1 = new Date(Date.parse((classTable.classDate+" "+classTable.classEndTime).replace(/-/g,"/"))); 
       			var date2 = new Date();
       			if((date1-date2)<=0){
       				$("#a_"+classTable.id).attr("href","javascript:void(0)"); 
       				if(classTable.isOrder==0){
       					$("#a_"+classTable.id).css("background","#e2e2e2 url('') no-repeat scroll center center");
       				}else{
       					$("#a_"+classTable.id).css("background","#e2e2e2 url('<%=basePath%>et/colors/blue/images/checked.png') no-repeat scroll center center");
       				}
       				
       			
       			}
			}
		}
	}
	
	
	
	function orderClass(id){
		ajaxDiv(false, id, '<%=basePath%>ph/classTable/orderClass.do','{id:'+id+'}' , orderClass2);
	}
	function orderClass2(data,divId){
		if(data["flag"]==0){
			$("#a_"+divId).toggleClass("activep").next().slideToggle("slow");
			var idInt = setInterval(function(){
				$("#a_"+divId).next().slideToggle("slow");
				clearInterval(idInt);
			},1000);
			$("#span_"+divId).html("订课成功！");
		}else{
			alert(data["message"]);
		}
	}
	
	
	function cancelClass(id){
		var startTime=$("#startTime"+id).val();
		var date1 = new Date(Date.parse(startTime.replace(/-/g,"/"))); 
       	var date2 = new Date(); 
		if((date1-date2)/3600/1000 >2){
			ajaxDiv(false, id, '<%=basePath%>ph/classTable/cancelClass.do','{id:'+id+'}' , cancelClass2);
		}else{
			alert("对不起，必须提前两个小时才能取消课程！")
		}
		
	}
	function cancelClass2(data,divId){
		if(data["flag"]==0){
			$("#a_"+divId).toggleClass("activep").next().slideToggle("slow");
			var idInt = setInterval(function(){
				$("#a_"+divId).next().slideToggle("slow");
				clearInterval(idInt);
			},1000);
			$("#span_"+divId).html("成功取消课程！");
		}
	}
</script>
</html>